<!--默认网站首页-->
<template>
	<div class="indexHome">
		<top></top>
		<div class="main">
			<!--deisgn-->
			<banner></banner>
			<page-tip strEnd="index" showClose>{{pageTip1[lp]}}</page-tip>
			<div class="manage-tips">
				<div class="flex-ai-c flex-jc-c" style="flex-direction: column">
					<div class="h1">社區治理投票功能已上線！</div>
					<div class="h2">發布、支持、參與賽事，賺取收益</div>
					<button class="bt-try" @click="visibleGuide=true">去體驗→</button>
				</div>
			</div>

			<!--导航-->
			<div class="visible-xs">
				<div class="index-navigate " >
					<a href="#/main/farm">{{xg.name + LangSet(['矿池','Farm'])}}</a>
					<!--<router-link to="/vote/vote">投票</router-link>-->
				</div>
			</div>
			<!--数据-->
			<div class="assets">
				<div class="box">
					<div class="data">
						<b>{{xg.name + LangSet(['价格','Price'])}}</b>
						<p class="">{{xg.toUsdtPrice|tofix(4)}} USDT</p>
					</div>
				</div>

				<div class="box">
					<!-- <div class="image"><img src="/images/icon_XG.png" alt=""></div> -->
					<div class="data">
						<b>
							{{LangSet(['總流通量','Circulation'])}}
							<el-popover placement="top-end" title="" width="200" trigger="hover"
							            :content="LangSet(['Defi釋放+遊戲挖礦產出','Farm release + Game Mined'])">
								<i class="f18 el-icon-question" slot="reference"></i>
							</el-popover>
						</b>

						<p class="">{{(earnPoolRelease+gameMineRelease)|tofix(xg.decimal)}}</p>
					</div>
				</div>

				<div class="box">
					<!-- <div class="image"><img src="/images/icon_XG.png" alt=""></div> -->
					<div class="data">
						<b>
							{{LangSet(['下次难度调整','Next difficulty'])}}
							<el-popover placement="top-end" title="" width="200" trigger="hover"
							            :content="LangSet(['遊戲挖礦每50000枚,產出將會減少30%','For every 50000 game mines, the output will be reduced by 30%'])">
								<i class="f18 el-icon-question" slot="reference"></i>
							</el-popover>
						</b>
						<p class="">{{nextDifficulty|tofix(xg.decimal)}}</p>
					</div>
				</div>

				<div class="box">
					<!-- <div class="image"><img src="/images/icon_XG.png" alt=""></div> -->
					<div class="data">
						<b>
							{{LangSet(['总销毁量','Total Burned'])}}
							<el-popover placement="top-end" title="" width="200" trigger="hover"
							            :content="LangSet(['遊戲挖礦销毁+回购销毁','Game mined burned + buyback burned'])">
								<i class="f18 el-icon-question" slot="reference"></i>
							</el-popover>
						</b>
						<p class="">{{totalBurned}}</p>
					</div>
				</div>
			</div>
			<div class="mt40"></div>
		</div>
		<footter color="white" showLink></footter>
		<el-dialog
			title=""
			width="340px"
			top="calc(50vh - 250px)"
			:append-to-body="true"
			:visible.sync="visibleGuide"
		>
			<div class="site-guide">
				<div class="block">
					<div class="title">我要玩賽事遊戲</div>
					<ul>
						<li>參與賽事遊戲投注，小玩怡情，大玩傷本</li>
					</ul>
					<div class="control"><el-button type="primary" size="small" @click="actGuide('play')" round >參與遊戲→</el-button></div>
				</div>
				<div class="block">
					<div class="title">我要發起賽事</div>
					<ul>
						<li>持有{{TICKET_PLEDGE}}個{{xg.name}}通證即可發起賽事</li>
						<li>賽事完成賺取80%收益!</li>
						<li>具體規則見賽事發起頁面</li>
					</ul>
					<div class="control"><el-button type="warning" size="small" @click="actGuide('sponsor')" round>發起賽事→</el-button></div>
				</div>
				<div class="block">
					<div class="title">我要支持賽事（投票）</div>
					<ul>
						<li>持有1個{{xg.name}}通證即可支持賽事（投票）</li>
						<li>賽事完成按投票比例瓜分20%收益!</li>
					</ul>
					<div class="control"><el-button type="success" size="small" @click="actGuide('support')" round>支持賽事→</el-button></div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>


<script type="text/javascript">
	/*加载资源*/
	import { mixins } from '@/mixins/mixins'
	import { mixinsUtils } from '@/mixins/mixins.utils'
	import {
		dev,
		getAllocatable,
		hex2Num,
		INITDATA_TIME_LIMIT,
		totalBurned,
		totalRelease,
		totalSupply,
	} from '@/libs/tron.lib'

	/*组件*/
	import top from '@/components/top.vue'
	import footter from "@/components/footer.vue"
	import banner from '@/components/banner.vue'
	import pageTip from '@/components/pageTip.vue'
	import tipManage from "@/components/tipManage";
	import { _DATA_POOL_ } from '@/libs/pool'

	export default {
		name:'index',
		components: { top,footter,banner,pageTip,tipManage },
		mixins:[mixins,mixinsUtils],
		data () {
			return {
				initPool: _DATA_POOL_,
				totalRelease: 0,
				totalSupply: 0,
				totalBurned: 0,
				defiInitTotal: 260000,
				adjustMineDifficulty: 50000,
				earnPoolRelease: 0,
				gameMineRelease: 0,
				nextDifficulty: 0,
				pageTip1: ['按照白皮書描述,遊戲所得收益,將全部用於市場回購並銷毀',
					'According to the WhitePaper, all proceeds from the game will be used for market buyback and burned'
				],
				visibleGuide : false
			};
		},
		computed:{
		},
		created () {
			let a = localStorage.getItem("S-earnPoolRelease");
			let b = localStorage.getItem("S-gameMineRelease");
			let c = localStorage.getItem("S-nextDifficulty");
			let d = localStorage.getItem("S-totalBurned");
			if(a && b && c && d){
				this.earnPoolRelease = parseFloat(a);
				this.gameMineRelease = parseFloat(b);
				this.nextDifficulty = parseFloat(c);
				this.totalBurned = parseFloat(d);
			}
		},
		mounted () {
			let that = this

			//创建监听事件, 保证可以tronweb初始化后才调用
			this.$root.eventHub.$on('loadInitData',() => {
				// debug &&  this.$notify({ title: '定时器', message: '重新加载数据...' ,duration:2000 })
				this.loadData();
			})

		},
		methods:{

			//加载数据
			loadData () {
				console.log('读取本页的默认数据')
				let that = this
				totalSupply(that.xg.address, that.sender, (rsp) => {
					let _totalSupply = hex2Num(rsp, that.xg.decimal);
					that.totalSupply = _totalSupply;
					that.gameMineRelease = _totalSupply - that.defiInitTotal;
					that.nextDifficulty = that.adjustMineDifficulty - that.gameMineRelease % that.adjustMineDifficulty;
					localStorage.setItem("S-gameMineRelease", that.gameMineRelease);
					localStorage.setItem("S-nextDifficulty", that.nextDifficulty);
				});

				totalRelease(that.xg.address, that.sender, (rsp) => {
					let _totalRelease = hex2Num(rsp, that.xg.decimal);
					that.totalRelease = _totalRelease;
					that.calEarnPoolRelease();
				});

				totalBurned(that.xg.address, that.sender, (rsp) => {
					let _totalBurned = hex2Num(rsp, that.xg.decimal);
					that.totalBurned = _totalBurned;
					localStorage.setItem("S-totalBurned", that.totalBurned);
				});
			},


			//什么赚取释放！？
			calEarnPoolRelease () {
				let that = this;
				let relase = 0;
				that.initPool.forEach((item) => {
					relase += (item.xgSupply - getAllocatable(item.start, item.end, item.xgSupply));
				})
				that.earnPoolRelease = relase;
				localStorage.setItem("S-earnPoolRelease", that.earnPoolRelease);
			},

			//纪睦行为跳转
			actGuide(act){
				if(act=='play'){
					this.$router.push('/contestHall')
				}else if(act=='sponsor'){
					if(this.isLogin){
						this.$router.push('/uc/manageCreateVote')
					}else{
						this.$notify({title:'提示',type:'error',message:'你没有登录钱包账号'})
					}
				}else if(act=='support'){
					this.$router.push('/manage')
				}
			},
		},

		beforeDestroy () {
			this.$root.eventHub.$off('loadInitData')
		},
	};

	////////////////////////////////////////////////外部脚本/////////////////////////////////////////

</script>


<style lang="less" scoped>
	/*公共变量*/
	@import '~@/assets/global.less';

	/*治理的公告*/
	.manage-tips {
		color:#333;
		font-size: 14px;
		max-width: 600px;
		padding: 20px 0 ;
		margin:0px auto 10px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.9);
		.h1{color:#ff0052;font-size: 22px;font-weight: bold;}
		.h2{color:#424242;font-size: 18px;font-weight: bold;padding:5px 0;}
		.bt-try {
			color:#404040;
			font-size:14px;
			font-weight: bold;
			background-color: #fff;
			padding:6px 20px;
			border-radius: 30px;
			box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
		}
	}
	//治理的引导
	.site-guide{
		height:calc(100vh - 80px);
		height:auto;
		.block:nth-child(n+2){margin-top: 5px;}
		.block{
			.title {
				color: #353e4c;
				font-size: 18px;
				font-weight: bold;
				padding-bottom:10px;
				border-bottom:1px solid #eee;
			}
			ul{
				margin-top: 5px;
				li{font-size: 14px;}
			}
			.control{
				padding:10px 0;
				.flex-jcfe()
			}
		}
	}

	/*资产数据*/
	.assets {
		max-width: 1100px;margin: 0px auto;padding: 40px 0px 40px;
		display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;
		.box {
			width: 48%;margin: 0px 0.5vw 40px;padding: 35px;background: #ffffffee;
			border-radius: 30px;box-shadow: 5px 5px 10px rgba(17, 17, 47, 0.1);
			display: flex;align-items: center;
			.image {
				img {height: 70px;}
			}
			.data {
				margin-left: 30px;
				b {color: #717377;font-size: 22px;font-weight: bold;}
				p {
					color:  #8babdc;
					font-size: 32px;
					font-weight: bold;
					margin-top: 5px;
					font-family: "Montserrat,sans-serif,Milibusmy"
				}
			}
		}
	}


	/*功能导航*/
	.index-navigate {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0px auto;
		flex-wrap: wrap;
		a {
			color: #313134;font-size: 18px;background: #fff;font-weight: bold;text-align: center;
			transition: all 0.5s;width: 200px;
			border: 0px solid #fff;padding: 10px;border-radius: 50px;margin-bottom: 20px;
			background: linear-gradient(to top, #ffffff, #49c33a);
			box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
		}
		a:hover {
			color: #999;
			//background: linear-gradient(to right, #11998e, #38ef7d);
		}
	}

	/**************************************小屏*********************************************/
	/**************************************小屏*********************************************/
	/**************************************小屏*********************************************/
	/**********************适应************************/
	@media screen and (max-width: @MINSCREEN){

		/*资产*/
		.assets {
			max-width: 1100px;margin: 0px auto;padding: 0px 0px 20px;display: block;
			.box {
				width: 100%;margin: 0px 0vw 10px;padding: 10px 10px;background: rgba(255,255,255,0.2);border-radius: 10px;
				box-shadow: 3px 3px 10px rgba(0, 0, 0, 0);display: flex;align-items: center;
				.image {
					img {height: 50px;}
				}
				.data {
					width:100%;margin:0px 20px;
					b {color:#4669af;font-size: 18px;display: block;border-bottom:1px solid rgba(255,255,255,0.2);padding:5px 0px;}
					p {color:#ffffff;font-size: 24px;margin-top: 5px;padding:10px 0px;}
				}
			}
		}

		/*功能导航*/
		.index-navigate {
			width: 100%;
			a {font-size: 18px;width: 45%;padding: 10px;border-radius: 50px;}
		}

	}
</style>
